<script lang="ts" setup>
import { computed } from "vue"

interface Props {
  prefix?: string
  name: string
  iconSize:number
}

const props = withDefaults(defineProps<Props>(), {
  prefix: "icon",
  iconSize:16
})

const symbolId = computed(() => `#${props.prefix}-${props.name}`)
</script>

<template>
  <svg class="svg-icon" :style="{
      width: iconSize + 'rem',
      height: iconSize + 'rem',
    }"
     aria-hidden="true">
    <use :xlink:href="symbolId" />
  </svg>
</template>

<style scoped>
.svg-icon {

  fill: currentColor;
  overflow: hidden;
}
</style>
